<template>
	<view class="uni-flex" :class="{'valve-border': border}" @click="onClick">
		<view class="uni-flex uni-column valve">
			<image class="img" src="/static/image/mipmap-xhdpi/manual.png" mode=""></image>
			<text class="text" :style="getTextColor">{{name}}</text>
		</view>
		<view class="uni-flex circle" v-if="border">
			<uni-icons class="check" color="#fff" size="15" type="checkmarkempty" v-if="selected"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default{
		data: ()=>{
			return {
			}
		},
		methods: {
			onClick(){
				this.$emit('click')
			}
		},
		computed:{
			getTextColor(){
				if(this.color){
					return `color: ${this.color}`
				} else {
					return ''
				}
			}
		},
		props:{
			name: String,
			selected: Boolean,
			border: Boolean,
			color: String
		}
	}
</script>

<style lang="scss" scoped>
$out-border-radius: 23.52rpx;
.valve-border{
	// padding: 11.76rpx 17.64rpx;
	border: 2.35rpx solid #FFFFFF;
	border-radius: $out-border-radius;
	width: 137.64rpx;
	height: 137.64rpx;
	justify-content: center;
	align-items: center;
}
.valve{
	// justify-content: center;
	align-items: center;
	position: relative;
	// align-self: center;
	.circle{
		position: absolute;
		background: #aed1cb;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		bottom: $out-border-radius/2;
		right: $out-border-radius/2;
		
		text-align: center;
		.check{
			font-weight: bold;
		}
	}
	.img{
		width: 72.94rpx;
		height: 50.58rpx;
	}
	.text{
		font-size: 21.17rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #1D786C;
	}
}
</style>
